<template>
	<view class="content">
		<view class="top-bar">
			<!-- 绝对定位 不站位 -->
			<view class="top-bar-left" @tap="backOne()">
				<image src="../../static/back.png" class="back-img"></image>
			</view>
			<view class="top-bar-right">
				<image src="../../static/more.png"></image>
			</view>
		</view>

		<!-- 背景 -->
		<view class="bg">
			<view class="bg-bai"></view>
			<image src="../../static/logo.jpg" class="bg-img" mode="aspectFill"></image>
		</view>

		<!-- 信息 -->
		<view class="main">
			<view class="user-header">
				<view class="sex" :style="{background:sexbg}">
					<image src="../../static/women.png"></image>
				</view>
				<image src="../../static/logo.jpg" mode="aspectFill" class="user-img"></image>
			</view>

			<view class="user-info">
				<view class="name">{{user.name}}</view>
				<view class="nickname">昵称: {{user.nickName}}</view>
				<view class="self-description">{{user.selfDescription}}</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="button" @tap="addFriendAnimation">
			<view class="btn">
				加为好友
			</view>
		</view>

		<!-- 增加好友请求的动画弹窗 -->
		<view class="add-req" :style="{bottom:-+addReqHeight + 'px'}" :animation="animationData">
			<view class="name">{{user.name}}</view>
			<textarea :value="textContent" maxlength="10" class="add-content">textarea</textarea>
		</view>
		<view class="add-btn" :animation="animationData">
			<view class="close"  @tap="addFriendAnimation">取消</view>
			<view class="add">加为好友</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// add-req 高度
				addReqHeight: 646,
				sexbg: "rgba(255,93,01,1)",
				user: {
					name: "信闯",
					nickName: "WILLIAM",
					selfDescription: "巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄",
					sex: 1
				},
				textContent: "巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄巴拉巴拉把哄巴拉巴拉哄",
				// 动画
				animationData: {},
				upAdd: false
			}
		},
		onReady:function(){
			this.getElementStyle();
		},
		methods: {
			close:function(){
				console.log("close")
				this.upAdd = !this.upAdd
			},
			backOne:function(){
				uni.navigateBack({
					delta:1
				})
			},
			// 获取页面高度
			getElementStyle:function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.bg').boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  console.log("节点离页面顶部的距离为" + data.top);
				}).exec();
			},
			// 添加好友动画
			addFriendAnimation: function() {
				this.upAdd = !this.upAdd
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: "ease",
				})
				if(this.upAdd){
					animation.bottom(0).step()
				}else{
					animation.bottom(-this.addReqHeight).step()
				}
				this.animationData = animation.export()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		// padding-top: var(--status-bar-height);
		// padding-bottom: env(safe-area-inset-bottom);;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.add-btn {
		position: fixed;
		z-index: 100;
		bottom: -104rpx;
		width: 100%;
		height: 104rpx;
		box-sizing: border-box;
		padding: 12rpx 36rpx;
		z-index: 100;
		display: flex;

		.close {
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			width: 172rpx;
			background-color: $uni-text-color-grey;
			border-radius: 10px;
		}

		.add {
			flex: auto;
			margin-left: 10px;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			background-color: $uni-color-warning;
			border-radius: 10px;
		}
	}

	.add-req {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		padding: 0 56rpx;
		height: 70%;
		background: rgba(255, 255, 255, 1);
		border-radius: 40rpx 40rpx 0px 0px;

		.name {
			padding-top: 54rpx;
			font-size: 22px;
			font-weight: 400;
			color: rgba(39, 40, 50, 1);
			line-height: 66px;
		}

		.add-content {
			padding: 18rpx 22rpx;
			box-sizing: border-box;
			height: 60%;
			width: 95%;
			background-color: rgba(243, 244, 246, 1);
			border-radius: 20px;
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: 400;
		}
	}

	.button {
		position: fixed;
		bottom: 20px;
		width: 100%;
		height: 66rpx;
		text-align: center;

		.btn {
			// 自适应正中间
			width: 80%;
			margin: 0 auto;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			background-color: $uni-color-warning;
			border-radius: 36px;
		}
	}

	.main {
		text-align: center;
		padding-top: 148rpx;

		.user-header {
			z-index: 10;
			width: 412rpx;
			height: 412rpx;
			position: relative;
			// 居中
			margin: 0 auto;

			.sex {
				z-index: 10;
				position: absolute;
				bottom: 12rpx;
				right: 22rpx;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;

				image {
					width: 32rpx;
					height: 32rpx;
					padding: 18rpx;
				}
			}

			.user-img {
				width: 400rpx;
				height: 400rpx;
				border-radius: 48rpx;
				border: 6px solid rgba(255, 255, 255, 1);
			}
		}

		.user-info {
			position: relative;
			padding-top: 42rpx;

			.name {
				font-size: 52rpx;
				color: black;
				line-height: 74rpx;
			}

			.nickname {
				font-size: 28rpx;
				line-height: 40rpx;
				color: $uni-text-color;
			}

			.self-description {
				// 居中,上下20 左右120
				padding: 20rpx 120rpx;
				height: 170rpx;
				font-size: 28rpx;
				font-weight: 300;
				line-height: 48rpx;
				color: $uni-text-color;
			}
		}
	}

	.bg {
		top: 88rpx;
		position: fixed;
		width: 100%;
		height: 100%;

		.bg-img {
			width: 100%;
			height: 100%;
			filter: blur(16px);
		}
	}

	.top-bar {
		display: flex;
		/* 固定跟父及无关,只跟页面有关 */
		position: fixed;
		justify-content: space-between;
		align-items: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		padding-top: var(--status-bar-height);

		.top-bar-left {
			padding-left: 18rpx;

			image {
				margin-top: 10rpx;
				border-radius: 16rpx;
				height: 58rpx;
				width: 58rpx;
			}
		}

		.top-bar-right {
			padding-right: 18rpx;

			image {
				height: 68rpx;
				width: 68rpx;
			}
		}
	}
</style>
